<template>
  <el-dialog :visible.sync="open" @close="close" :title="title" width="300px" append-to-body destory-on-close>
    <el-form ref="elForm" :model="formData" size="small" label-width="100px" label-position="left">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="角色分组" prop="dept">
            <el-select v-model="formData.groupId" placeholder="请选择角色分组" style="width: 100%" @change="onGroupChange">
              <el-option :key="0" label="请选择角色分组" :value="0" />
              <el-option v-for="group in roleGroups" :key="'group-' + group.groupId" :label="group.groupName" :value="group.groupId" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="参演人员" prop="location">
            <el-select v-model="formData.roleId" placeholder="请选择参演人员" style="width: 100%" @change="onRoleChange">
              <el-option :key="0" label="请选择参演人员" :value="0" />
              <el-option v-for="(role, index) in roleMembers" :key="'role-' + index + '-' + role.userId" :label="role.userName" :value="role.userId" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";

export default {
  name: "DrillRolePickerDialog",
  mixins: [dialogMixin],
  components: {},
  props: [],
  inject: ["groups"],
  data() {
    return {
      formData: {
        groupId: 0,
        groupName: "",
        roleId: 0,
        roleName: "",
      },
      roleGroups: [],
      roleMembers: [],
      title: "选择演练参演人员",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    showDialog() {
      this.roleGroups = this.groups();
      this.formData = {
        groupId: 0,
        groupName: "",
        roleId: 0,
        roleName: "",
        groupDeptId: 0
      };
      this.open = true;
    },
    handleConfirm() {
      this.$emit("handleOk", this.formData);
      this.open = false;
    },
    onGroupChange() {
      let group = this.roleGroups.find(val => val.groupId == this.formData.groupId);
      this.roleMembers = group.drillPractsGroupDepts;
      this.formData.groupName = group.groupName;
      this.formData.roleId = 0;
    },
    onRoleChange() {
      let role = this.roleMembers.find(val => val.userId == this.formData.roleId);
      this.formData.roleName = role.userName;
      this.formData.groupDeptId = role.groupDeptId
    },
  },
};
</script>
<style></style>
